<div ng-hide="loaded" style="padding: 2em;">
  <div class="loading">Loading. Please wait...</div>
  <div class="status">{{status}}</div>
</div>

<div ng-show="loaded">

  <h1 class="projectlistheader"><a id="my_projects"></a>My Projects</h1>

  <table class="table-condensed">

    <thead>
      <tr>
        <th class="key">id</th>
        <th></th>
        <th class="project_name">Name</th>
        <th class="project_description">Description</th>
        <th></th>
      </tr>
    </thead>

    <tbody>
      <tr class="project_row" ng-repeat="project in projects | orderBy:'orderby':true" ng-class="{ghost: !project.key}">
        <td class="key">{{project.key}}</div>
        <td><button class="btn btn-small btn-success" ng-class="{disabled: !project.key}" ng-click="select_project(project)"><i class="icon-share-alt icon-white"></i> open project</button>
        <td class="project_name">{{project.name}}</td>
        <td class="project_description">{{project.description}}</td>
        <td><button class="btn btn-small btn-danger" ng-class="{disabled: !project.key}" ng-click="prompt_delete_project(project)"><i class="icon-remove icon-white"></i> delete</button></td>
      </tr>

      <tr class="project" ng-hide="has_projects()">
         <td colspan="5">
           <div>
             <b>No projects created yet.</b>
           </div>
           <div style="color: gray;">
              <div>Use the project templates below to start a new project.</div>
             <div ng-hide="config.is_logged_in">
               Or <a ng-click="login()">login</a> to access your saved projects.
             </div>
           </div>
         </td>
      </tr>
    </tbody>

  </table>
  <div>
    <h1><a id="my_templates"></a>Project Templates</h1>
    <div ng-repeat="tp in template_projects | orderBy:'name'">
        <div class="tp" style="margin: .5em;"
             ng-hide="!!tp.in_progress_task_name && ! config.is_admin && ! config.is_devappserver">
          <div class="pull-left span2">
            <button class="btn" ng-click="new_project(tp)"
                    ng-disabled="!!tp.in_progress_task_name">
              <span ng-hide="!!tp.in_progress_task_name">
                <i class="icon-plus"></i> copy me
              </span>
              <span ng-show="!!tp.in_progress_task_name">(Fetching...)</span>
            </button>
          </div>
          <div style="display: inline-block;">
            <span class="template_name">
              <a ng-href="{{tp.html_url}}" target="{{tp.name}}">{{tp.name}}</a>
            </span>
            <span ng-show="config.is_admin || config.is_devappserver">
              <button class="admin btn btn-mini btn-link "
                      ng-click="recreate_template_project(tp)"
                      ng-disabled="!!tp.in_progress_task_name">
                <i class="icon-refresh"></i> refresh
              </button>
              <button class="admin btn btn-danger btn-mini btn-link "
                      ng-click="prompt_delete_project(tp)"
                      ng-disabled="!!tp.in_progress_task_name">
                <i class="icon-remove"></i> delete
              </button>
            </span>
            <div class="template_description">{{tp.description}}</div>
          </div>
        </div>
    </div>
  </div>

  <div>
    <h1>Import new templates</h1>
    <form class="form-horizontal">
      <div class="control-group">
        <label class='control-label' for='import_url'>Github project URL</label>
        <div class="controls">
          <div class="input-append">
            <input class='span6' type='url' id='import_url'
                   ng-model='import_url' required
                   placeholder="https://github.com/github_user_id/repo_name">
            <button class="btn" type="submit" ng-click="new_project_by_url(import_url)">Import</button>
          </div>
        </div>
      </div>
    </form>
  </div>

</div>
